<script setup>

import {Calendar, Delete, Edit, Message, Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
const data=reactive({
  input:null
})
</script>

<template>
<div>
  <el-button> Element Plus</el-button>
  <el-button type="primary" size="large">Primary</el-button>
  <el-button type="success" circle>Success</el-button>
  <el-button type="info" loading>Info</el-button>
  <el-button type="warning" >Warning</el-button>
  <el-button type="danger">Danger</el-button>
</div>
<div>
    <el-icon :size="30">
      <Edit />
    </el-icon>
    <el-icon :size="30">
      <Delete />
    </el-icon>
    <el-icon :size="30">
      <Message/>
    </el-icon>
<!--  结合el-button-->
  <el-button type="primary" :icon="Edit" circle>
  </el-button>
</div>
<!--  输入框-->


  <div style="margin: 30px">
    <el-input v-model="data.input"
              style="width: 240px" placeholder="请输入内容" :prefix-icon="Search"/>
    {{data.input}}
    <el-input v-model="data.input"
              style="width: 240px" placeholder="请输入内容" :suffix-icon="Calendar"/>
    {{data.input}}
  </div>

</template>

<style scoped>

</style>